Hydration in SvelteKit is the process of attaching Svelte's reactivity and event listeners to the HTML that was pre-rendered or server-side rendered (SSR). This allows the application to become fully interactive without re-rendering the entire DOM from scratch.
The server generates the initial HTML for the page using SSR or prerendering.
The browser loads this HTML and displays it immediately, improving perceived performance.
SvelteKit loads the corresponding JavaScript bundle for the page.
The JavaScript 'hydrates' the static HTML by attaching event listeners and enabling reactivity.
After hydration, the app behaves like a regular Svelte SPA.
Here's a simplified flow of how SvelteKit handles hydration when SSR is enabled:
SvelteKit automatically hydrates only the parts of the page that need interactivity. This is sometimes referred to as 'islands architecture'. Static content remains static, reducing unnecessary JavaScript execution.
Improves initial page load performance by showing HTML instantly.
Enables SEO-friendly pages with SSR-generated content.
Reduces JavaScript work by hydrating only what's needed.
Provides a smooth transition from server-rendered to fully interactive app.